<template>
         <div class="box">
              <main v-for="(item,i) in data" :key="i">
                    <h5>{{item.name}}</h5>
                    <div class="dt">
                        <p>借款金额：&nbsp;<span style="font-size:0.56rem;color:#fe374c;font-weight:600;">{{item.price}}元</span></p>
                        <p>借款期限：&nbsp;<span style="width:80%;">{{item.time}}</span></p>
                        <p>产品名称：&nbsp;<span>{{item.name}}</span></p>
                        <router-link v-if="item.code==1" tag="a" class="st" :to="{name:'hkdetail',params:{ddid:item.id}}">还款中</router-link>
                        <router-link v-if="item.code==4" tag="a" class="yq" :to="{name:'hkdetail',params:{ddid:item.id}}">已逾期</router-link>
                    </div>
                    <h6>申请时间:{{item.sqtime}}</h6>
              </main>
         </div>
</template>

<script>
import $ from "jquery"

export default {
      data(){
          return{
            //    name:"永利金服",
            //    price:"3000",
            //    time:"1周",
            //    state:"审核中",
            //    sqtime:"2018-12-25",        
               data:[
        {"name":"卡帮帮","price":"8000","time":"3周","sqtime":"2018-12-25","code":"1","id":"101"},        
        {"name":'借贷宝',"price":"6000",'time':"5周",'sqtime':'2019-01-01',"code":"4","id":"505"}]
          }
      },
      mounted(){
      	    var userInfo = JSON.parse(localStorage.getItem('userInfo'))
               if(!userInfo){
                 this.$router.push({name:'login'})
               }else{
               	
               }
//          var _this = this
//          var list =[];
//               $.ajax({
//               	url:"data.json",
//                  type:"GET",                    
//                  dataType: "json",
//                  success:function(res){
//                          list = res.datalist
//                          for(let i=0;i<list.length;i++){
//                              if(list[i].state=='还款中'){
//                                  _this.data.push(list[i])
//                              }
//                          }
//                    }
//                  })
         
      }
}
</script>

<style lang="less" scoped>
         .box{
             padding-top:0.42rem;
         }
         main{
             position: relative;
             left:0;
             right:0;
             margin:0 auto;
             width:90%;
             height:8.16rem;
             background:#fff;
             border-radius:0.18rem;
             padding-top:0.9rem;
             margin-bottom:0.44rem;
         }
         .dt{
             width:90%;
             height:4.42rem;
             padding-left:5%;
             padding-top:4%;
             background:#f3f3f3;
             border-radius:0.18rem;
             position: relative;
             left:0;
             right:0;
             margin:0 auto;
             display:flex;
             flex-direction:column;
             
         }
         h5{
             font-size:0.6rem;
             color:#333333;
             width:90%;
             position: relative;
             left:0;
             right:0;
             margin:0 auto;
             margin-bottom:0.54rem;
         }
         h6{
             position: absolute;
             right:5%;
             bottom:8%;
             
         }
         p{
             font-size: 0.48rem;
             color:#666666;
             line-height:1.1rem;
         }
         span{
             color:#333333;
         }
         .st{
             width:3.6rem;
             height:1.2rem;
             border:0.04rem solid #67C23A;
             text-align:center;
             line-height:1.1rem;
             position: absolute;
             right:5%;
             top:0;
             bottom:0;
             margin: auto 0;
             color:#fff;
             background:#67C23A;
             border-radius:0.22rem;
             letter-spacing:0.06rem;
             font-size:0.5rem;
         }
         .yq{
         	 width:3.6rem;
             height:1.2rem;
             border:0.04rem solid #F56C6C;
             text-align:center;
             line-height:1.1rem;
             position: absolute;
             right:5%;
             top:0;
             bottom:0;
             margin: auto 0;
             color:#fff;
             background:#F56C6C;
             border-radius:0.22rem;
             letter-spacing:0.06rem;
             font-size:0.5rem;
         }
</style>